﻿<phone:PhoneApplicationPage
    x:Class="MS.TravelJourney.Final.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:MS.TravelJourney.Final.Convert"
    xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
    toolkit:TiltEffect.IsTiltEnabled="True"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource FontForeColor}"
    SupportedOrientations="Portrait"  Orientation="Portrait"
    shell:SystemTray.IsVisible="True">
    <!--SystemTray-->
    <shell:SystemTray.ProgressIndicator>
        <shell:ProgressIndicator x:Name="progressBar" IsIndeterminate="True" IsVisible="True"></shell:ProgressIndicator>
    </shell:SystemTray.ProgressIndicator>
    <!--Tile Effect-->
    <toolkit:TransitionService.NavigationInTransition>
        <toolkit:NavigationInTransition>
            <toolkit:NavigationInTransition.Backward>
                <toolkit:TurnstileTransition Mode="BackwardIn"/>
            </toolkit:NavigationInTransition.Backward>
            <toolkit:NavigationInTransition.Forward>
                <toolkit:TurnstileTransition Mode="ForwardIn"/>
            </toolkit:NavigationInTransition.Forward>
        </toolkit:NavigationInTransition>
    </toolkit:TransitionService.NavigationInTransition>
    <toolkit:TransitionService.NavigationOutTransition>
        <toolkit:NavigationOutTransition>
            <toolkit:NavigationOutTransition.Backward>
                <toolkit:TurnstileTransition Mode="BackwardOut"/>
            </toolkit:NavigationOutTransition.Backward>
            <toolkit:NavigationOutTransition.Forward>
                <toolkit:TurnstileTransition Mode="ForwardOut"/>
            </toolkit:NavigationOutTransition.Forward>
        </toolkit:NavigationOutTransition>
    </toolkit:TransitionService.NavigationOutTransition>
    <!--静态资源-->
    <phone:PhoneApplicationPage.Resources>
        <local:SplitStringConverter x:Key="splitConverter"></local:SplitStringConverter>
    </phone:PhoneApplicationPage.Resources>
    <!--LayoutRoot 是包含所有页面内容的根网格-->
    <Grid x:Name="LayoutRoot" Background="{StaticResource BackgroundColor}">
         <!--Panorama 控件-->
        <phone:Panorama Title="Travel Journey">
            <!--Panorama 项目一-->
            <phone:PanoramaItem Header="丽江">
                <!--具有文字环绕的单行列表-->
                <phone:LongListSelector Margin="0,0,-22,0" Tap="LongListSelector_Tap_1" ItemsSource="{Binding Items}">
                    <phone:LongListSelector.ItemTemplate>
                        <DataTemplate>
                            <Grid Margin="0,6">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="0.4*"></ColumnDefinition>
                                    <ColumnDefinition></ColumnDefinition>
                                </Grid.ColumnDefinitions>
                                <Image Margin="0,15" VerticalAlignment="Top" Source="{Binding Photo}"></Image>
                                <StackPanel Grid.Column="1" Margin="10,5" VerticalAlignment="Center">
                                    <TextBlock Text="{Binding Name}"></TextBlock>
                                    <TextBlock Text="{Binding Desc,Converter={StaticResource splitConverter}}" TextWrapping="Wrap"></TextBlock>
                                </StackPanel>
                            </Grid>
                        </DataTemplate>
                    </phone:LongListSelector.ItemTemplate>
                </phone:LongListSelector>
            </phone:PanoramaItem>

            <!--全景项目三-->
            <phone:PanoramaItem Header="丽江图片" Orientation="Horizontal">
                <!--具有大型图像占位符的双倍宽度的全景-->
                <Grid>
                    <ListBox ItemsSource="{Binding Items}">
                        <ListBox.ItemsPanel>
                            <ItemsPanelTemplate>
                                <toolkit:WrapPanel Orientation="Vertical" Height="400"/>
                            </ItemsPanelTemplate>
                        </ListBox.ItemsPanel>
                        <ListBox.ItemTemplate>
                            <DataTemplate>
                                <Image Margin="20,0" Width="250" Height="200" Source="{Binding Photo}">
                                </Image>
                            </DataTemplate>
                        </ListBox.ItemTemplate>
                    </ListBox>
                </Grid>
            </phone:PanoramaItem>
        </phone:Panorama>
        <!--ApplicationBar-->
        
        <!--取消注释，以显示对齐网格，从而帮助确保
            控件在公用边界上对齐。图像在系统栏中显示时的
            上边距为 -32px。如果隐藏了系统栏，则将此值设为 0
            (或完全删除边距)。

            在发送之前删除此 XAML 和图像本身。-->
        <!--<Image Source="/Assets/AlignmentGrid.png" VerticalAlignment="Top" Height="800" Width="480" Margin="0" Grid.Row="0" Grid.RowSpan="2" IsHitTestVisible="False" />-->

    </Grid>
    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" Mode="Minimized" IsMenuEnabled="True" Opacity="0.5">
            <shell:ApplicationBarIconButton IconUri="Assets/Settings.png"
                                            Click="ApplicationBarIconButton_Click_1"
                                            Text="设置"></shell:ApplicationBarIconButton>
            <shell:ApplicationBarIconButton IconUri="Assets/About.png"
                                            Click="ApplicationBarIconButton_Click_2"
                                            Text="关于"></shell:ApplicationBarIconButton>
        </shell:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>
</phone:PhoneApplicationPage>